<template>
  <div>
    <BasicModal
      width="80%"
      v-bind="$attrs"
      @register="registerModal"
      :title="getTitle"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { listApi, AddApi, EditApi } from '/@/api/set/menu';
  import { listToTree } from '/@/utils/helper/treeHelper';
  import { FormSchema } from '/@/components/Table';

  import { appStore } from '/@/store/modules/app';
  const isDir = (type: string) => type === 'M';
  const isMenu = (type: string) => type === 'C';
  const isButton = (type: string) => type === 'F';

  export const formSchema: FormSchema[] = [
    {
      label: 'menuId',
      field: 'menuId',
      component: 'Input',
      show: false,
    },
    {
      field: 'menuType',
      label: '菜单类型:',
      component: 'RadioButtonGroup',
      defaultValue: 'M',
      componentProps: {
        options: [
          { label: '目录', value: 'M' },
          { label: '菜单', value: 'C' },
          { label: '按钮', value: 'F' },
        ],
      },
      colProps: { lg: 24, md: 24 },
    },
    {
      field: 'menuName',
      label: '菜单名称:',
      component: 'Input',
      required: true,
      colProps: { lg: 24, md: 24 },
    },
    {
      field: 'menuKey',
      label: '路由唯一键:',
      component: 'Input',
      required: true,
    },
    {
      field: 'parentId',
      label: '上级菜单:',
      component: 'TreeSelect',
      defaultValue: 0,
      componentProps: {
        replaceFields: {
          title: 'menuName',
          key: 'menuId',
          value: 'menuId',
        },
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'orderNum',
      label: '排序:',
      component: 'InputNumber',
      required: true,
    },
    {
      field: 'icon',
      label: '图标:',
      component: 'IconPicker',
      show: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'path',
      label: '路由地址:',
      component: 'Input',
      required: true,
      show: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'currentActiveMenu',
      label: '当前激活的菜单:',
      component: 'Input',
      show: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'component',
      label: '组件路径:',
      component: 'Input',
      required: true,
      show: ({ values }) => isMenu(values.menuType),
    },
    {
      field: 'perms',
      label: '权限标识:',
      component: 'Input',
      show: ({ values }) => !isDir(values.menuType),
    },
    {
      field: 'visible',
      label: '状态:',
      component: 'RadioButtonGroup',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '启用', value: '0' },
          { label: '禁用', value: '1' },
        ],
      },
    },
    {
      field: 'target',
      label: '是否外链:',
      component: 'Select',
      defaultValue: ' ',
      componentProps: {
        options: [
          { label: '当前窗口', value: ' ' },
          { label: '新窗口', value: '_blank' },
        ],
      },
      show: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'webType',
      label: '菜单分类:',
      component: 'Select',
      required: true,
      defaultValue: appStore.getAppType,
      componentProps: {
        options: [
          { label: '留学生', value: '0' },
          { label: '美喔', value: '1' },
        ],
      },
    },
    //   {
    //     field: 'keepalive',
    //     label: '是否缓存',
    //     component: 'RadioButtonGroup',
    //     defaultValue: '0',
    //     componentProps: {
    //       options: [
    //         { label: '否', value: '0' },
    //         { label: '是', value: '1' },
    //       ],
    //     },
    //     show: ({ values }) => isMenu(values.type),
    //   },

    //   {
    //     field: 'visible',
    //     label: '是否显示',
    //     component: 'RadioButtonGroup',
    //     defaultValue: '0',
    //     componentProps: {
    //       options: [
    //         { label: '是', value: '0' },
    //         { label: '否', value: '1' },
    //       ],
    //     },
    //     show: ({ values }) => !isButton(values.type),
    //   },
  ];

  export default defineComponent({
    name: 'MenuModal',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);

      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
        labelWidth: 160,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { lg: 12, md: 24 },
      });

      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        resetFields();
        isUpdate.value = !!data?.isUpdate;

        if (unref(isUpdate)) {
          setFieldsValue({
            ...data.record,
          });
        }
        const treeData = await queryList();
        updateSchema({
          field: 'parentId',
          componentProps: {
            treeData,
          },
        });
      });

      async function queryList() {
        const data = await listApi({ webType: appStore.getAppType });
        if (data.data) {
          return listToTree(data.data, {
            id: 'menuId',
            pid: 'parentId',
            children: 'parentId',
          });
        }
        return [];
      }

      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));

      async function handleSubmit() {
        const values = await validate();
        values.parentId = 0 | values.parentId;
        try {
          values.webType = Number(values.webType);
        } catch (error) {}
        if (values.menuId > 0) {
          await EditApi(values);
        } else {
          await AddApi(values);
        }
        console.log(values);
        closeModal();
        emit('success');
      }

      return { registerModal, registerForm, getTitle, handleSubmit };
    },
  });
</script>
